<template>
  <div class="app">
    <h1>Vue Topology 示例</h1>
    <div class="toolbar">
      <button @click="addNode">添加单个节点</button>
      <button @click="addNodesWithEdges">添加带连线的节点对</button>
      <button @click="removeSelected">删除选中</button>
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <button @click="fitView">居中显示</button>
      <button @click="clear">清空</button>
    </div>
    <Topology
      ref="topology"
      width="100%"
      height="600px"
      @node-added="handleNodeAdded"
      @node-removed="handleNodeRemoved"
      @edge-added="handleEdgeAdded"
      @edge-removed="handleEdgeRemoved"
      @selection-change="handleSelectionChange"
    />
    <div class="selected-info">
      选中: {{ selectedNodes.length }}个节点, {{ selectedEdges.length }}条边
    </div>
  </div>
</template>

<script>
/* eslint-disable */ 
import { Node } from '../src/core'

export default {
  name: 'App',
  data() {
    return {
      selectedNodes: [],
      selectedEdges: [],
      lastAddedNode: null, // 跟踪上一个添加的节点
      snapToGrid: true
    }
  },
  mounted() {
    // 初始化节点（现在addNode方法会自动处理连线）
    this.addNode()
  },

  methods: {
    addNode() {
      const topology = this.$refs.topology
      if (topology) {
        const x = Math.random() * 400 + 50
        const y = Math.random() * 300 + 50
        const colors = ['#f0f0f0', '#e6f7ff', '#fff2e8', '#f6ffed', '#fff0f6']
        const color = colors[Math.floor(Math.random() * colors.length)]

        // 添加新节点
        const newNode = topology.addNode({
          x, y,
          label: `节点${Date.now().toString().slice(-4)}`,
          color
        })

        // 如果存在上一个节点，则创建连线
        if (this.lastAddedNode) {
          topology.addEdge({
            sourceNodeId: this.lastAddedNode.id,
            sourceAnchorId: this.lastAddedNode.anchors[2].id, // 右侧锚点
            targetNodeId: newNode.id,
            targetAnchorId: newNode.anchors[0].id, // 左侧锚点
            color: '#666',
            width: 2
          })
        }

        // 更新上一个节点为当前节点
        this.lastAddedNode = newNode
        return newNode
      }
      return null
    },
    removeSelected() {
      const topology = this.$refs.topology
      if (topology) {
        this.selectedNodes.forEach(node => {
          topology.removeNode(node.id)
        })
      }
    },
    zoomIn() {
      const topology = this.$refs.topology
      if (topology) {
        topology.zoom(1.2)
      }
    },
    zoomOut() {
      const topology = this.$refs.topology
      if (topology) {
        topology.zoom(0.8)
      }
    },
    fitView() {
      const topology = this.$refs.topology
      if (topology) {
        topology.fitView()
      }
    },
    clear() {
      const topology = this.$refs.topology
      if (topology) {
        topology.clear()
      }
    },
    handleNodeAdded(node) {
      console.log('节点添加:', node)
    },
    handleNodeRemoved(node) {
      console.log('节点删除:', node)
    },
    handleEdgeAdded(edge) {
      console.log('边添加:', edge)
    },
    handleEdgeRemoved(edge) {
      console.log('边删除:', edge)
    },
    handleSelectionChange(selection) {
      this.selectedNodes = selection.nodes
      this.selectedEdges = selection.edges
    },
    addNodesWithEdges() {
      // 添加第一个节点
      const node1 = this.addNode()
      
      // 稍微延迟添加第二个节点，确保第一个节点已完全创建
      setTimeout(() => {
        // 添加第二个节点，addNode方法会自动创建连线
        this.addNode()
      }, 100)
    },
    toggleSnapToGrid() {
      this.snapToGrid = !this.snapToGrid
    },
  }
}
</script>

<style>
.app {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.toolbar {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

button {
  padding: 6px 12px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #40a9ff;
}

.selected-info {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}
</style>